<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例测试</title>
    <script src="vue.js"></script>
</head>
<body>
    <script>
        var data = { a: 1 }

        // 该对象被加入到一个 Vue 实例中
        var vm = new Vue({
            data: data
        })

        // 获得这个实例上的属性
        // 返回源数据中对应的字段
        vm.a == data.a // => true

        // 设置属性也会影响到原始数据
        vm.a = 2
        data.a // => 2

        // ……反之亦然
        data.a = 3
        vm.a // => 3

        **********************************
        var data = { a: 1 }
        var vm = new Vue({
            el: '#example',
            data: data
        })

        vm.$data === data // => true
        vm.$el === document.getElementById('example') // => true

        // $watch 是一个实例方法
        vm.$watch('a', function (newValue, oldValue) {
            // 这个回调将在 `vm.a` 改变后调用
        })
*************************************************

        这里唯一的例外是使用 Object.freeze()，
        这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。

        var obj = {
            foo: 'bar'
        }

        Object.freeze(obj)

        new Vue({
            el: '#app',
            data: obj
        })
        <div id="app">
            <p>{{ foo }}</p>
        <!-- 这里的 `foo` 不会更新！ -->
        <button v-on:click="foo = 'baz'">Change it</button>
        </div>
    </script>

</body>
</html>